import React, { PureComponent } from 'react';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Legend,
} from 'bizcharts';

interface ChartInfoProps {
  chartInfo: any,
}

class ChartInfoElem extends PureComponent<ChartInfoProps> {
  render() {
    const { chartInfo = [] } = this.props;

    chartInfo.forEach((item: any) => {
      item.value = parseFloat(item.value);
    });

    const cols = {
      date: {
        range: [0, 1],
      },
    };

    return (
      <div>
        <Chart
          height={400}
          padding={[60, 40, 40, 80]}
          data={chartInfo}
          scale={cols}
          forceFit
          labelLine={{
            lineWidth: 2, // 线的粗细
          }}
        >

          <Axis
            name="value"
            label={{
              formatter: (val: any) => `${val / 10000}w`,
            }}
          />

          <Axis name="date" />

          <Legend position="top" />

          <Tooltip />

          <Geom
            type="line"
            position="date*value"
            size={1}
            color="name"
          />
        </Chart>
      </div>
    );
  }
}

export default ChartInfoElem;
